<template>
  <div id="ErCode">
    <mt-header title="向商家付钱">
      <router-link to="/my" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button @click="refresh" slot="right">刷新</mt-button>
    </mt-header>
    <div id="pic">
      <img class="tiaoxingma" :src="barcodePic">
      <br>
      <img class="ercode" :src="ercodePic">
      <p>有效期{{time/1000/60}}分钟</p>
    </div>
  </div>
</template>

<script>
  // import ctu from '../../http/cookieU.js';

  export default {
    name: "ErCode",
    data() {
      return {
        img: "/static/img/付款码.jpg",
        ercodePic: "",
        barcodePic: "",
        token: '',
        time: 0
      }
    },
    mounted: function () {
      // var us = ctu.getCookies('userName');
      // if (us !== null && us !== '') {
      //   console.log("22222" + us);
      //   alert("cunzai")
      // } else {
      //   this.$router.push('/login');
      // }

      //判断是不是移动设备
      // if (this.$isMoblie._isMobile()) {
      //   alert("移动设备")
      // } else {
      //   alert("pc设备")
      // }
      this.token = localStorage.getItem("token");
      if (this.token !== null && this.token !== "") {
        //请求二维码
        this.requestErcode();

      } else {//token失效重新登陆
        this.$router.push('/login');
      }
    },
    methods: {
      requestErcode() {
        let postData = this.$qs.stringify({
          token: this.token,
        });
        this.$axios.get(this.$apis.ercode, postData).then(res => {
          console.log(res);
          if (res.data.code === 1) {
            //成功
            this.ercodePic = res.data.data.ercodePic;
            this.barcodePic = res.data.data.barcodePic;
            this.time = res.data.data.time;

          } else {
            //弹错误提示
            this.$myUtils.bottomToast(res.data.msg)
          }
        })
          .catch(error => {
            this.$myUtils.bottomToast(error)
          })
      },
      refresh() {
        this.$toast("刷新成功");
        this.requestErcode()
      }

    },

  }
</script>

<style scoped>
  .ercode {
    margin-top: 50px;
    width: 150px;
    height: 150px;
  }

  .tiaoxingma {
    margin-top: 20px;
    width: 250px;
    height: 80px;
  }

  #pic {
    text-align: center;
    border-radius: 5px;
    margin: 10px;
    background: white;
    height: auto;
  }

  p {
    padding: 5px;
    font-size: 14px;
    margin: .3rem;
  }

</style>
